<template>
    <view class="class-detail">
        <mescroll-uni top="0" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"  class="message" @init="mescrollInit">
            <view class="book-class-item common-interval" v-for="(item, index) in titleList" :key="index" v-if="type!=='3' || (type==='3'&&titleList.length)">
                <view class="book-img-header common-header">
                    <view v-if="type === '1'">
                        <image mode="aspectFit" :src="item[id+'Head']"/>
                        <text class="book-info">{{item[id+'Name']}}</text>
                    </view>
                    <text v-if="type === '2'" class="book-info">适用{{item.ageMin}}-{{item.ageMax}}岁</text>
                    <text v-if="type === '3'" class="book-info">{{item.sortName || ''}}</text>
                    <view class="watch-more" @tap="watchMore(item)">
                        <text>{{item.books}}本</text>
                        <text class="icon-arrow-right arrow-btn"/>
                    </view>
                </view>
                <class-books :itemId="item[id+'Id']" :idName="id" v-if="type!=='3'"/>
                <class-books v-if="type==='3'" :itemId="item.sortId" idName="sort"/>
            </view>
        </mescroll-uni>
    </view>
</template>

<script>
    import classBooks from './classBooks'
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    import gwSearchInput from '../../components/gw-search-input'
    import shopBookCard from '../../index/bookDetail/shop-book-card'
    import service from "@/service";
    export default {
        name: "index",
        components: {
            classBooks, MescrollUni, gwSearchInput, shopBookCard
        },
        data(){
            return {
                titleList: [],
                id: '',
                type: '',
                page: 1,
                limit: 10,
                downOption: {
                    auto: false,
                },
                upOption:{
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true,
                    // auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    offset: 130,
                    textNoMore:'我是有底线的 >_<'
                },
                mescroll: null
            }
        },
        onLoad(params){
            let {id, type, label} = params;
            this.id = id;
            this.type = type;
            uni.setNavigationBarTitle({
                title: label
            });
        },
        onShow(){},
        mounted(){
            // if(this.type !== '3'){
            //     this.getClassList()
            // }
        },
        methods:{
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            downCallback(mescroll){
                this.titleList = [];
                this.page = 1;
                mescroll.resetUpScroll();
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                if(this.type !== '3'){
                    this.getClassList()
                } else {
                    this.getClassSorts(this.id)
                }
                // this.getClassList();
            },
            getClassList () {
                uni.showLoading({
                    title: '加载中',
                });
                service.homeService.getClassList({
                    data: {
                        page: this.page,
                        limit: this.limit
                    },
                    type: this.id,
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let data = res.result.data || [];
                            this.page > 1 ? this.titleList.push(...data) : this.titleList = data;
                            this.mescroll && this.mescroll.endBySize(data.length, res.result.num);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            getClassSorts (sortId) {
                uni.showLoading({
                    title: '加载中',
                });
                service.homeService.getClassSorts({
                    data: {
                        sortId: sortId,
                        page: this.page,
                        limit: this.limit
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let data = res.result.data || [];
                            this.page > 1 ? this.titleList.push(...data) : this.titleList = data;
                            this.mescroll && this.mescroll.endBySize(data.length, res.result.num);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            watchMore(item){
                if(this.type === '1'){
                    uni.navigateTo({
                        url: `../../classification/class-info-list?idName=${this.id}&id=${item[this.id+'Id']}`
                    })
                } else if(this.type === '2') {
                    uni.navigateTo({
                        url: `../../classification/class-search-list?idName=${this.id}&id=${item[this.id+'Id']}`
                    })
                } else {
                    uni.navigateTo({
                        url: `../../classification/class-search-list?idName=sort&id=${item.sortId}&sortType=${this.id}`
                    })
                }

            }
        }
    }
</script>

<style scoped lang="scss">
    .class-detail{
        min-height: 100%;
        background:rgba(242,245,247,1);
        .book-class-item{
            background: #fff;
            padding-bottom: 20rpx;
            margin-bottom: 20rpx;
            box-sizing: border-box;
        }
        .book-img-header{
            padding: 20rpx 0;
            display: flex;
            align-items: center;
            height:64rpx;
            width: 100%;
            margin-bottom: 20rpx;
            justify-content: space-between;
            &.common-header{
                padding: 10rpx 0;
            }
            image{
                width:64rpx;
                height:64rpx;
                border-radius:100%;
                vertical-align: middle;
                margin-right: 30rpx;
            }
            .book-info{
                font-size:28rpx;
                font-weight:500;
                line-height:40rpx;
                color:rgba(51,51,51,1);
            }
            .watch-more{
                font-size:24rpx;
                font-weight:400;
                line-height:33rpx;
                color:rgba(153,153,153,1);
            }
        }
    }
</style>
